header{max-width:1200px;padding:0;margin:0 auto;}
header .menu li{float: left;padding:31px 0;margin-left:30px;}
header .menu li a{}
header .menu li.is-active a,.hide-menu li.is-active a{color: black;}
header .menu {float:right;}
header .img{float: left;padding-top:16px;}

img{width: 100%;height: 100%}

video{width: 100%;height: 100%;object-fit: fill;}

a{text-decoration: none;color: #555;}

.clear-fix::after{display: block;content: "";clear: both;}
.my-container{margin:0 auto;overflow: hidden;}
.my-container>.img{height: 666px;border:1px solid transparent;position: relative;text-align: center;padding:175px 0;color:white;}
.my-container .img video{z-index: -1;background: rgba(0,0,0,.8);width: 100%;position:absolute;left:0;bottom:0;height: 100%;}
.my-container .img .text-one{margin: 30px 0;font-size:20px;animation: fadeInUp  1.6s}

.my-container .img .text-tow{font-size: 90px;animation: fadeInUp 1.6s;}

.my-container .img .text-btn,.order-main .btn{animation: fadeInUp 1.6s ;cursor: pointer;width: 224px;height: 52px;border-radius: 52px;background: white;border: 0;}
.my-container .img .text-btn:hover{background: #ddd;transition: all .5s linear ;}

.index-video{position: relative;max-width: 1200px;margin: 78px auto;}
.index-video>div{float: left;position: relative}

.index-video div.video{opacity: 0;width: 750px;height:422px;border:1px solid transparent;}
.index-video div.intro{opacity: 0;background: white;z-index: 100;padding:36px 34px;box-shadow: 4px 4px 5px 0 #ddd;width: 572px;height: 280px;border:1px solid transparent;margin-left:-130px;margin-top:71px;}
.index-video div.intro h3{font-size:32px;margin-bottom: 24px;}
.index-video div.intro p{font-size: 13px;color: #333;line-height: 26px;}
.index-video .play{
    width: 75px;
    height: 75px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
}
.my-container .banner{
    height:180px;
    border: 1px solid transparent;
    text-align: center;
    background: rgba(0,0,0,.8) url("../imgs/img (4).png") no-repeat center center;
    background-size: 100% 100%;
    opacity: 0;
}

.my-container .banner.about-page{opacity: 1;}

.banner .title{
    border: 1px solid white;
    color: white;
    font-size:36px;
    margin: 30px auto;
    max-width: 1200px;
    height: 120px;
    line-height: 120px;
}
.my-container .banner.banner-tow{ opacity: 0;background: rgba(0,0,0,.8) url("../imgs/img (6).png") no-repeat center center;background-size: 100% 100%;}
.banner.banner-tow .title{border: none;background: transparent;padding:0 10px;}

.banner.banner-tow .title span{margin-right:10px;margin-bottom:10px;display: inline-block;height: 2px;width: 210px;background: linear-gradient(270deg,rgba(238,238,238,1) 0%,rgba(216,216,216,0) 100%);}
.banner.banner-tow .title span.right{margin-left: 10px;transform: rotate(180deg)}

.index-items{max-width: 1200px;padding:60px 0 60px;margin:0 auto;}
.index-items .index-item{text-align: center;float: left;margin-bottom: 60px;opacity: 0;}
.index-item .img{margin:0 auto;width: 53px;height: 53px;border:1px solid transparent;}
.index-item .title{font-size: 18px;margin:30px 0 10px;}
.index-item .intro{font-size: 12px;color: #666;line-height: 20px;}
.index-item .exp-img{border:1px solid transparent;}
.index-item  .exp-title{line-height: 40px;}

.index-items .index-item.exp-item{margin-bottom: 10px;}
.index-items.exp-items{padding-bottom: 10px;}
.index-bottom-btn{text-align: center;}
.index-bottom-btn button{border-radius: 4px;background:transparent;cursor: pointer;text-align: center;height: 37px;line-height: 37px;width: 100px;color:#8BC221;border: 1px solid #8BC221; }

.index-why{margin-top:76px;text-align: center;background: rgba(0,0,0,.3) url("../imgs/img (8).png") no-repeat center center ;padding:70px 0;}
.index-why .title,.index-company .title{font-size: 36px;color:white;}
.index-why .title span,.index-company .title span{background-size: 100% 100%;margin-right: 10px;margin-bottom:10px;display: inline-block;height: 2px;width: 210px;background: linear-gradient(270deg,rgba(238,238,238,1) 0%,rgba(216,216,216,0) 100%);}
.index-why .title span.right,.index-company .title span.right{margin-left: 10px;;transform: rotate(180deg)}

.index-why-items{max-width:1200px;margin: 84px auto 0;}
.index-why-items li{opacity: 0;padding:10px;}
.index-why-items li .img{margin: 0 auto;width: 150px;height: 150px;border: 1px solid transparent;}

.index-why-items li .title{font-size: 18px;color: white;line-height: 40px;}
.index-why-items li .intro{font-size: 12px;color: #E3E3E3;line-height: 20px;}

.index-company .title{text-align: center;color: black;margin:88px auto 60px;}
.index-com-items{max-width: 1200px;margin: 0 auto;padding:0 0 102px;}
.index-com-items li{margin-bottom: 5px;height: 108px;border: 1px solid transparent;float: left;}

.footer{background: #2E2E2E;width: 1200px;margin: 0 auto;}
footer{overflow-x: hidden;/* max-width: 1200px; */margin:0 auto;background: #2E2E2E;padding:41px 0 0;}
.company-intro{float: left;}
.company-intro>li{float: left;line-height: 35px;min-width: 200px;}
.company-intro{padding:0 15px;}
.company-intro>li li.title{color: white;font-size: 16px;}
.company-intro>li{color: #C5C5C5;font-size: 13px}
footer .img{margin:0 auto;width: 110px;height: 110px;border: 1px solid transparent;}
footer .right{float: right;text-align: center;}
footer .right .p{font-size: 13px;line-height: 30px;color:white; }
footer .floor-one{position: relative;}
footer .floor-one::after{
    display: block;
    content: "";
    clear: both;
}
footer .footer-line{margin-top: 30px;height: 1px;background: #585858;width: 100%;}
footer  .class-footer{line-height: 55px;height:55px;color:#C5C5C5;font-size: 13px;text-align: center;}

.fadeInLeft,.fadeInRight,.fadeIn,.fadeInUp{animation-duration: 2s;animation-fill-mode: forwards;}

.index-why-items>li:nth-child(1),.index-items>li:nth-child(1){animation-delay: 0s;}
.index-why-items>li:nth-child(2),.index-items>li:nth-child(2){animation-delay: .5s;}
.index-why-items>li:nth-child(3),.index-items>li:nth-child(3){animation-delay: 1s;}
.index-why-items>li:nth-child(4),.index-items>li:nth-child(4){animation-delay: 1.5s;}
.index-items>li:nth-child(5){animation-delay: 2s;}
.index-items>li:nth-child(6){animation-delay: 2.5s;}
.index-items>li:nth-child(7){animation-delay: 3s;}
.index-items>li:nth-child(8){animation-delay: 3.5s;}


/*display page*/

.display{}
.display .floor-one{margin-bottom: 35px;padding:165px 0;text-align: center;background: url("../imgs/img (7).png") no-repeat center center;background-size: 100% 100%;}
.display .floor-one .txt-small{
    font-size: 25px;
    color: #FFDE00;
    letter-spacing:25px;
}
.display .floor-one .txt-big{font-size: 98px;color: white;letter-spacing:19px;}
.display .floor-tow{max-width: 1200px;margin: 0 auto;}
.display .btn-ground {margin-bottom: 40px;}
.display .btn-ground li{cursor: pointer;margin-bottom: 10px;margin-right:20px;border:1px solid #e2e2e2;float: left;text-align: center;border-radius:4px;width: 130px;height: 50px;line-height: 50px;}
.display-list li{text-align: center;}
.display-list p{line-height: 40px;font-size: 18px;}
.display .page{margin:68px auto 99px;text-align: center;}
.display .page li{cursor: pointer;background: #F0F0F0;border-radius: 2px;display: inline-block;margin-right: 10px;height: 35px;text-align: center;line-height: 35px;}
.display .page li.is-active{background: #8BC221;color: white;}
.display .page li.next,.display .page li.prev{padding:0 10px;}
.display .page li.page-item{width: 35px;}

.display .is-active{background: #8BC221;color: white;}

/*order page*/

section.order{position: relative;}

.order-main{overflow: hidden;max-width: 1200px;margin:0 auto;}

.order-main .btn{margin-top:60px;}
.order-main .left .title:nth-child(1){margin-top: 272px;}
.order-main .title{font-size: 60px;color: white;line-height: 80px;}
.order-main .left{float:left;}
.order-main .right{margin-bottom: 160px;margin-top:80px;width:564px;float: right;padding:34px 37px;background: rgba(0,0,0,.8)}
.order-main .right li{overflow: hidden;margin-bottom: 20px;}
.order-main .right div.left-item,.order-main .right div.right-item{width: 48%;}
.order-main .right .left-item{float: left;}
.order-main .right .title{font-size: 14px;line-height: 30px;font-weight: 400;color: #C1C1C1;}
.order-main .right input.input,input.normal-input{padding:0 12px;}
.order-main .right .select,.order-main .right .input,.normal-input,.normal-btn{padding:0 8px;;font-size: 14px;cursor: pointer;width: 100%;height: 50px;line-height: 50px;background: white;border:0;border-radius: 4px;}
.order-main .right .right-item{float: right}
.order-main .right .normal-btn{background: #8BC221;color: white;}
.order .swiper-container{position:absolute;top:0;left:0;width: 100%;bottom:0;z-index: -1;}

/*concat page*/
.concat{}
.concat .map{box-shadow:0 12px 24px 0 rgba(0,0,0,0.04);;background: white;position: relative;z-index: 10;margin: -100px auto 100px;max-width: 1200px;padding:50px;}
.concat .map .title{font-size: 36px;line-height: 50px;}
.concat .map .sub-title{font-size: 26px;color: #555;line-height: 45px;margin-bottom: 31px;}
.concat .map .detail{overflow: hidden;}
.concat .map .detail li{width: 50%;float: left;margin-bottom: 30px;color: #333;}
.concat .map #map{height: 425px;}

/*about page*/
.about{}
.about-items{max-width: 1200px;margin:84px auto 0;}
.about-items li{text-align: right;margin-bottom: 30px;opacity: 0;}
.about-items li .title{font-size: 22px;line-height: 40px;}
.about-items li .content{font-size:12px;color: #666;line-height: 26px;}
.about-items li .left{float: left;max-width: 244px;}
.about-items li .img{float: right;max-width: 320px;}

.about .banner.about-page{background: none;}
.about .banner.about-page span{color: black;}
.about .banner.about-page .title{color: black;}

.about-team,.server-items,.about-server{max-width: 1200px;margin: 0 auto 9px;}
.about-team li{margin-bottom: 30px;opacity: 0;}
.about-team .img img{width: 180px;height: 180px;border-radius: 50%;margin: 0 auto;border: 1px solid gray;}
.about-team .name{text-align: center;font-size: 18px;font-weight: bold;line-height: 40px;}
.about-team .intro{font-size: 12px;color:#555;line-height: 20px;}
.server-items>li:first-child{margin-left: 40px;}
.server-items>li{float: left;margin-left:80px;}
.server-items li .num{position: relative;margin: 0 auto;display: block;font-size: 26px;border-radius: 50%;line-height: 32px;text-align:center;border:1px solid #A9A900;width: 36px;height: 36px;color:#A9A900;font-weight: bold;}
.server-items li .num::before,.server-items li .num::after{content: "";display: block;width: 100px;height: 1px;background:#A9A900;position: absolute;}
.server-items li .num::before{top:50%;left:-100px;}
.server-items li .num::after{top:50%;left: 36px;}
.server-items p.title{font-weight: bold;line-height: 40px;text-align: center;}
.server-items .server-step li{position: relative;margin: 10px auto;border-radius: 4px;border:1px solid #bfbfbf;width: 120px;height: 36px;line-height: 36px;text-align: center;font-size: 12px;color: #333;}
.server-items .server-step li::before{display: block;content: "";position: absolute;top:-10px;left:50%;height: 10px;width: 1px;background: #BFBFBF;z-index: 10;}
.about-server .make-father{transform: translateY(-100px)}
.about-server .make{width: 168px;height: 45px;line-height: 45px;background: #A9A900;color: white;font-size: 18px;}
.about-server .make-table{margin-left: -2px;border-spacing: 2px;border-collapse:separate;}
.about-server .make-table td{font-size: 12px;color: #333;height:45px;padding:0 30px;background: #F3F3F3;vertical-align: middle;}
.about .index-items{padding:0;}
/*media*/
@media screen and (max-width: 576px) {
    .container {
        max-width: 540px;
    }

    div.header{display: none !important;}
    .my-container .img p.text-tow{font-size: 45px;}
    /*page about*/
    .about-items div.left{max-width: none;text-align: center;}
    .about-items li div.img{max-width: none;}
    ul.about-items{margin-top: 0;}
    .about-team p.intro{text-align: center;}
    header.header-hide{display: block;}
    .index-why .title{font-size:28px;}
    .footer{width: 100%;}
    footer .class-footer{line-height: 28px;;}
    .concat .map{
      padding: 15px;
    }
}

@media screen and (max-width: 1250px){
    .my-container .index-video div.video{
        width: 100%;
    }
    .my-container .index-video div.intro{
        margin: 71px 0 0;
        width: 100%;
    }
    .my-container .index-why .title span, .my-container .index-company .title span{width: 50px;}
    .my-container .banner.banner-tow .title span{width: 50px;padding:0 10px;}
    .my-container .banner .title{font-size: 24px;}

    .my-container .index-video div.intro{height: auto;margin-top: 0;}

    footer div.right{float: left;padding:0 15px;}

    .display .floor-one .txt-big{font-size: 45px;}

    .order-main ul.right{width: 100%;}

    .order-main div.left{width: 100%;text-align: center;}
}

@media screen and (min-width: 768px) {
    .container {
        max-width: 720px;
    }

}

@media screen and (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media screen and (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

.header-hide{box-shadow: #999 0 1px 2px ;z-index: 1000;display: none;background: white;padding:0 10px;height: 50px;position: fixed;top:0;left:0;width: 100%;}
.hide-img{height: 25px;width: 95px;margin-top: 12.5px;float: left;}
.header-hide .menu{margin-top: 9px;float: right;width: 32px;height: 32px;cursor: pointer;}
.header-hide .hide-menu{display: none;border-top:1px solid #666;background: white;position: absolute;top:100%;left: 0;width: 100%;padding:0 5px;}
.header-hide .hide-menu li{line-height: 50px;height: 50px;}
.pos_vod{
    position: fixed;
    width: 50%;
    left: 25%;
    height: 500px;
    text-align: center;
    z-index: 999;
    top: 25%;
    display: none;
}
.pos_vod video{
}
video{
    width: auto;
    max-width: 100%;
}
.pos_vod p{
    background: #161616;
    color: #fff;
    padding: 5px 15px;
    border-radius: 5px;
}
.play_btn{
    position: absolute;
    top: 40%;
    left: 45%;
    z-index: 99999;
    width: 50px;
    height: 50px;
}

ul.pagination {
    margin: 68px auto 99px;
    text-align: center;
    display: block;
}
ul.pagination li{
    cursor: pointer;
    background: #F0F0F0;
    border-radius: 2px;
    display: inline-block;
    margin-right: 10px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    padding: 0 14px;
}
ul.pagination li.active{
    background: #8BC221;
    color: white;
}
